<template>
  <div class="product-edit">
    <div class="step">
      <el-steps :space="200" :active="step" style="flex-basis: 300px" finish-status="success">
        <el-step title="商品基本信息"></el-step>
        <el-step title="添加库存信息"></el-step>
        <el-step title="添加关联"></el-step>
      </el-steps>
    </div>
    <!--  表单-->
    <!--      第一步-->
    <div>
      <div class="froms">
        <el-card class="box-card">

          <el-form ref="form" :rules="rules" :model="product" label-width="80px">
            <div class="first-from" v-show="step == 0">
              <el-row :gutter="10">
                <el-col :span="7">
                  <el-form-item label="商品名称:" label-width="100px" prop="gname">
                    <el-input size="small" v-model="product.gname"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="品牌:" prop="brand_id">
                    <el-select v-model="product.brand_id"  placeholder="请选择">
                      <el-option
                        v-for="item in brandlist"
                        :key="item.id"
                        :label="item.cname"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :offset="3">
                  <el-form-item label="产地:" prop="selectedOptions">
                    <el-cascader
                      size="large"
                      :options="options"
                      v-model="selectedOptions"
                      @change="handleChange">
                    </el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">

                <el-col :span="7">
                  <el-form-item label="商品编码:" label-width="80px">
                    <el-input size="small" v-model="product.pcode" placeholder="商品编码"></el-input>

                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="关键词:" label-width="80px">
                    <el-input size="small" v-model="product.keywords" placeholder="关键词"></el-input>

                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="商品描述:" label-width="80px">
                    <el-input size="small" v-model="product.descr" placeholder="产品描述"></el-input>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <!--           图片上传-->
                  <el-form-item label="商品图片:" label-width="80px">
                    <el-upload
                      class="upload-demo"
                      action="http://bufantec.com/api/leju/admin/material/uploadImg"
                      :on-success="upSucceess"
                      multiple
                      :limit="3"
                    >
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>

                  </el-form-item>
                </el-col>
                <el-col :span="4" :offset="2">
                  <img width="100px" :src="product.cover_img" alt="">
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-switch
                    v-model="product.isshow"
                    :active-value="1"
                    :inactive-value="0"
                    inactive-text="是否上架">
                  </el-switch>
                </el-col>
                <el-col :span="6">
                  <el-switch
                    v-model="product.ishot"
                    :active-value="1"
                    :inactive-value="0"
                    inactive-text="是否最热">
                  </el-switch>
                </el-col>
                <el-col :span="6">
                  <el-switch
                    v-model="product.isnew"
                    :active-value="1"
                    :inactive-value="0"
                    inactive-text="是否最新">
                  </el-switch>
                </el-col>

              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="进价:" label-width="50px">
                    <el-input-number v-model="product.price_in" size="small" :min="1" label="描述文字"></el-input-number>
                    单位(分)
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="标价:" label-width="50px">
                    <el-input-number v-model="product.price_out" size="small" :min="1" label="描述文字"></el-input-number>
                    单位(分)
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="当前价格:" label-width="100px">
                    <el-input-number v-model="product.price_now" size="small" :min="1" label="描述文字"></el-input-number>
                    单位(分)
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="重量:" label-width="50">
                    <el-input-number v-model="product.weight" size="small" :min="1" label="描述文字"></el-input-number>
                    单位(kg)
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="排序:" label-width="50">
                    <el-input-number v-model="product.sort" size="small" :min="1" label="描述文字"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单位:" label-width="50px">
                    <el-input size="small" v-model="product.unit_name" placeholder="单位:比如个/件......"></el-input>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="商品分类" label-width="70px">
                    <el-checkbox-group v-model="selectkindIds" @change="handleCheckedCitiesChange">
                      <el-checkbox v-for="item in kianlist" :label="item.id" :key="item.id">{{ item.ctitle }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="系列分类" label-width="70px">
                    <el-select v-model="product.seriesId" placeholder="请选择">
                      <el-option
                        v-for="item in servicelist"
                        :key="item.id"
                        :label="item.cname"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="送货服务" label-width="70px">
                    <el-select v-model="product.service_promise" placeholder="请选择展示服务类型">
                      <el-option
                        v-for="item in servicepromise"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <!--        第二步-->
            <div class="two-from" v-show="step == 1">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="详情标题" label-width="80px">
                    <el-input size="small" v-model="product.detail_title" placeholder="请输入标题"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="描述" label-width="80px">
                    <el-input size="small" v-model="product.detail_desc" placeholder="请输入详情描述"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div>
                    添加 SKU:颜色
                  </div>
                  <el-row :gutter="10">
                    <el-col :span="24" style="display: flex; ">
                      <div v-for="(item,index) in skucolrlist" :key="index" style="margin-right: 15px">
                        <el-checkbox v-model="item.check"></el-checkbox>
                        <span style="color: white;padding: 0px 3px;margin: 3px 3px"
                              :style="{backgroundColor:item.color}">{{ item.color_text }}</span>
                        <span @click="delsku(item.id)">删除</span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10" style="margin-top: 15px">
                    <el-col :span="8" style="width: 80%; margin-top: 0.3em">
                      <el-input size="small" v-model="tempcolor.color_text" placeholder="颜色文本"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-color-picker v-model="tempcolor.color"></el-color-picker>
                    </el-col>
                    <el-col :span="4" style="margin-top: 5px">
                      <el-button @click="createColor" type="primary" size="mini">生成色值项</el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 20px">
                <el-col :span="24">
                  <el-button type="default" @click="creatUplist">生成sku列表</el-button>
                  <el-table
                    :data="upsku"

                    style="width: 100%">
                    <el-table-column
                      prop="color"
                      label="颜色"
                      width="100px">
                    </el-table-column>
                    <el-table-column
                      prop="color_text"
                      label="色值"
                      width="100px">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      width="200px"
                      label="sku编码">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.sku_code" placeholder="placeholder"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      width="200px"
                      label="价格">
                      <template slot-scope="scope">
                        <el-input-number v-model="scope.row.price" :min="1"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      width="200px"
                      label="库存">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.count" placeholder="placeholder"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      align="center"
                      width="160px"
                      label="操作">
                      <template slot-scope="scope">
                        <el-button type="danger" @click="delupSku(scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <!--            上传轮播图-->
              <el-row :gutter="10">
                <el-col :span="4">
                  <h4>轮播图片:</h4>
                  <el-upload
                    class="upload-demo"
                    action="http://bufantec.com/api/leju/admin/material/uploadImg"
                    :on-success="upSucceess1"
                    :show-file-list="false"
                    :limit="5"
                    multiple
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </el-col>
                <el-col :span="15">
                  <div style="display: flex;align-items: center">
                    <div v-for="(item,index) in imgs" :key="index" >
                      <img style="width: 140px; height: 150px;" :src="item" alt="">
                    </div>
                  </div>

                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 10px;margin-bottom: 30px">
                <el-col :span="24">
                  <h4>商品详情</h4>
                  <Tinymce ref="tin" :value="initValue" :uploadurl="uploadUrl"/>
                </el-col>
              </el-row>
            </div>
            <!--第三步-->
            <div class="three-from" v-show="step == 2">
              <el-row :gutter="10">
                <el-col :span="12">
                  <h4>关联商品:</h4>
                  <div>
                    <el-transfer
                      v-model="adoutlist"
                      :titles="['原有商品','关联商品']"
                      :props="{ key: 'id',label: 'gname'}"

                      :data="goodslist">
                    </el-transfer>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 30px;margin-bottom: 30px">
               <el-col :span="18">
                 <el-form-item label="备注" label-width="50px">
                   <el-input   type="textarea" maxlength="300" v-model="product.bak" placeholder="placeholder"></el-input>
                 </el-form-item>
               </el-col>
              </el-row>
            </div>


          </el-form>


          <div style="text-align: center">
            <el-button type="primary" @click="bank" v-show="step == 1 || step==2">返回上一步</el-button>
            <el-button type="primary" @click="stepnext">{{ text }}</el-button>
          </div>

        </el-card>
      </div>

    </div>

  </div>

</template>

<script>
import productApi from "@/api/product/product";
import Tinymce from '@/components/Tinymce'
import _ from 'loadsh'
import host from '@/settings'
import kindApi from "@/api/product/kind";
import seriesApi from "@/api/product/series";
import {regionDataPlus,CodeToText} from 'element-china-area-data'
import brandApi from "@/api/product/brand";

export default {
  name: "productEdit",
  components: {
    Tinymce
  },
  data() {
    return {
      initValue: '',
      uploadUrl: 'http://www.bufantec.com/admin/xy/upload/uploadImg',
      host: host.host,
      step: 0,
      //商品属性
      product: {
        gname: '',
        cname: '',

      },
      //地址选择相关
      options: regionDataPlus,
      selectedOptions: [],
      brandlist: [],
      //分类,系列
      kianlist: [],
      servicelist: [],
      //选中的分类
      selectkindIds: [],
      //服务项
      servicepromise: [
        {id: 0, name: '无'},
        {id: 1, name: '送货上门'},
        {id: 2, name: '上门安装'},
        {id: 3, name: '全选'},
      ],
      //临时颜色列表
      tempcolor: {},
      skucolrlist: [],
      //提交的列表
      upsku: [],
      //轮播图图片
      imgs: [],
      //商品列表
      goodslist: [],
      //相关 商品
      adoutlist:[],

      //编辑页面的值
      id:this.$route.params.id,
      rules:{
        gname:[{required: true, message: '请输入活动名称', trigger: 'blur'}],
        brand_id:[{required: true, message: '请输入活动名称', trigger: 'blur'}],

      }


    }

  },
  methods: {
//step步骤条控制
    stepnext() {

      this.step++
      if (this.step == 3) {
        this.step = 0
        // 此处可用来进行表单提交
        let product = {
          ...this.product,
          id:this.id,
          kindIds:this.selectkindIds,
          imgs:this.imgs,
          link1:this.adoutlist.join(','),

        }
        for (var i=0;i<this.upsku.length;i++){
          var {sku_code,price,color_text,color,count} =this.upsku[i];
          product['skuList['+i+']'] = {
            sku_code,
            price,
            color_text,
            color,
            count
          }
        }
        //表单验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            let flag;
            if (this.id){
              flag = productApi.upBaseCode
            }else {
              flag = productApi.uporSave
            }
            // 提交新产品
            flag(
              product
            )
              .then(res=>{
                if (res.code = 'success'){
                  this.$message.success('保存成功')
                  this.$router.push({name:'productList'})
                }else{
                  this.$message.error('提交失败!')

                }
              })

          } else {
           this.$message.error('有未填写项目!')
            return false;
          }
        });

      }
      if (this.step == 2) {
        this.product.content = this.$refs.tin.getContent()

      }

    },
    bank() {
      this.step--;
      if (this.step == -1) {
        this.step = 0
      }
    },
    //地址相关
    handleChange(value) {
     this.product.origin_province = CodeToText[value[0]]
      this.product.origin_city = CodeToText[value[1]]
      this.product.origin_area = CodeToText[value[2]]
      this.product.origin_code = value.join(',')

    },
    //品牌列表
    getBrandlist() {
      brandApi.getBrandList({
        start: 1,
        limit: 99
      })
        .then(res => {
          this.brandlist = res.data.list
        })
    },
    //分类列表
    getKiad() {
      kindApi.getKiadList()
        .then(res => {
          this.kianlist = res.data;
        })
    },
    //系列列表
    getService() {
      seriesApi.getSeriesList()
        .then(res => {
          this.servicelist = res.data;
        })
    },
    //图片上传成功
 upSucceess(val) {

     let url = val.ossUrl
   this.product.cover_img = url
    },

    //轮播图片
    upSucceess1(val) {

      this.imgs.push(val.ossUrl)
      console.log(1111)
      console.log(this.imgs)
    },
    //分类选中
    handleCheckedCitiesChange(val) {

    },
    // 生成颜色列表
    createColor() {
      //克隆新对象
      let newobj = _.clone(this.tempcolor)
      newobj.id = new Date().getTime()
      newobj.check = false
      newobj.sku_code = ''
      newobj.price = 0
      newobj.count = 0
      this.skucolrlist.push(newobj)

    },
    //删除其中某一项
    delsku(val) {
      let num = this.skucolrlist.findIndex(el => el.id == val)
      this.skucolrlist.splice(num, 1)
    },
    //sku提交
    creatUplist() {

      this.upsku = this.skucolrlist.filter(el => {
        return el.check
      })

    },
    //删除
    delupSku(val) {
      let num = this.upsku.findIndex(el => {
        el.id == val
      })
      this.upsku.splice(num, 1)
    },
    //商品列表
    getProlist() {
      productApi.proList()
        .then(res => {
          this.goodslist = res.data.list
        })
    },
    getDetail(){
      productApi.productDetail({
        id:this.id
      })
      .then(res=>{
        console.log('商品详情',res)
        //对数据进行赋值
        this.product = res.data
        this.selectkindIds=res.data.kindIds.split(',')
        this.upsku = res.data.skuList

        //恢复富文本
        this.$refs.tin.setContent(res.data.content)
      this.selectedOptions = res.data.origin_code.split(',')
      //回复穿梭狂
        this.adoutlist = res.data.link1.split(',')
        //还原轮播图片
        this.imgs = res.data.imgs.split(',');
      })
    }

  },
  computed: {
    text() {
      switch (this.step) {
        case 0:
          return "下一步,填写库存信息";
          break;
        case 1:
          return "下一步,填写补充信息";
          break;
        case 2:
          return "提交保存";
          break;
        default:
          return ''
      }
    }
  },
  created() {
    this.getBrandlist()
    this.getKiad()
    this.getService()
    this.getProlist()
    if(this.$route.params.id){
      this.getDetail()
    }

  }
}
</script>

<style lang="scss" scoped>
.product-edit {
  .step {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    margin-left: 22%;

  }

  .froms {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
  }
}
</style>
